<template>
  <div class='shoplist'>
      <router-link :to="{path:'/shop',query:{id:item.obj.id}}" :key='num' v-for='(item, num) in shoplist.list' >
      <section class='sec'>
          <div class="logo">
                 <img :src="'https://fuss10.elemecdn.com/' + item.obj.image_path.substr(0,1) + '/' + item.obj.image_path.substr(1,2) + '/' + item.obj.image_path.substr(3) + (item.obj.image_path.substr(-3) === 'peg'? '.jpeg' : '.png' ) + '?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'" alt=""> 
          </div>
          <div class="msg">
              <section class="index_1">
                <h3 class="name"><span>{{item.obj.name}}</span></h3>
                <div class="support rt">
                  <div :key='index' class="activity-container" v-if='item.obj.supports' v-for='(a, index) in item.obj.supports' >
                    <span class="activity-activityIcon" style="color: rgb(153, 153, 153); border-color: rgb(221, 221, 221);">{{a.icon_name}}</span>
                  </div>
                </div>
              </section>
              <section class="index_2">
                  <div class="rating-wrapper">
                    <div class="rating-max">
                      <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                    </div> 
                     <div class="rating-rating" style="width: 88%;">
                      <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                    </div> 
                  </div>
                  <span class="xing"> {{item.obj.rating}} </span>
                  <span class="shou">月售{{item.obj.recent_order_num}}单</span>
                  <span class="feng rt" v-if='item.obj.delivery_mode' ><span>蜂鸟专送</span></span>
              </section>
              <section class="index_3">
                  <div class="song">
                      <span class="qi">￥{{item.obj.float_minimum_order_amount}}起送/</span><span class="fei">{{item.obj.piecewise_agent_fee.tips}}/</span><span class="ren">{{item.obj.average_cost}}</span>
                  </div>
                  <div class="time">
                      <span class="dist">{{item.juli}}</span>
                      <span class="min">{{item.obj.order_lead_time}}分钟</span>
                  </div>
              </section>
              <section class="index-activites">
                <div class="activite-list" >
                  <div class="activity-single" :key='index' v-for='(it, index) in item.obj.activities' v-if='index<2' > 
                     <span class="activity-icon" :style="{backgroundColor:'#'+it.icon_color}" >{{it.icon_name}}</span> 
                    <span class="activity-description">{{it.tips}}</span>
                  </div>
                </div>
                <div class="activite-btn" >
                  {{item.obj.activities.length+1}}个活动
                  <svg class="tubiao"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#activity-more"><svg viewBox="0 0 12 6" id="activity-more" width="100%" height="100%"><path fill-rule="evenodd" d="M4.577 5.423c.79.77 2.073.767 2.857 0l4.12-4.026C12.345.625 12.09 0 10.985 0H1.027C-.077 0-.33.63.457 1.397l4.12 4.026z"></path></svg></use></svg>
                </div>
              </section>
          </div>
      </section>
    </router-link>  
  </div> 
</template>

<script>
  import { mapState } from 'vuex';
  import $ from 'jquery';
  export default {
    name: 'shoplist',
    props: ['id'],
    data () {
      return {

      }
    },
    computed: {
      ...mapState(['shoplist', 'params'])
    },
    mounted () {
      this.$store.commit('SHOPLIST')
      $(() => {
        var vm = this
        $(window).scroll(function() {
          // 浏览器滚动距离顶部的高度
          var scrollTop = $(this).scrollTop()
          // console.log(scrollTop)
          // 整个元素的实际高度 包括滚动条以下的部分
          var scrollHeight = $(document).height()
          // 当前页面窗口的高度 不包括滚动条以下部分
          var windowHeight = $(this).height()
          if (scrollTop + windowHeight === scrollHeight) {
            vm.$store.commit('ADDLIMIT', vm.params.params.limit += 20)
            // console.log(vm.params.params.limit)
            vm.$store.commit('SHOPLIST')
          }
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
  .shoplist{
    background-color: #fff;
		.sec{
      display: flex;
      border-bottom: 1px solid #eee;
			.logo{
				padding: px2rem(15) px2rem(10);
				img{
					width: px2rem(60);
					vertical-align: middle;
				}
			}
			.msg{
				width: 100%;
				padding: px2rem(15) px2rem(10)  px2rem(15) 0;
				.index_1{
					height: px2rem(16);
					line-height: px2rem(16);
					.pin{
					  color: black;
						margin-right: px2rem(5);
						font-size: px2rem(12);
						background-color: #ffd930
					}	
					.name{
            color: #000;
            display: inline-block;
						font-size: px2rem(15)
          }
          .support{
            display: inline-block;
            justify-content: flex-end;
            .activity-container{
              line-height: px2rem(11);
              display: flex;
              align-items: center;
              font-size: px2rem(8);
              .activity-activityIcon{
                font-style: normal;
                line-height: 1;
                height: px2rem(11);
                display: inline-block;
                box-sizing: border-box;
                text-align: center;
                border: 1px solid;
                border-radius: px2rem(1);
                color: rgb(153, 153, 153);
                border-color: rgb(221, 221, 221);
              }
            }
          }		
				}
				.index_2{
					margin-top: px2rem(7.5);
					height: px2rem(14);
          line-height: px2rem(14);
          .rating-wrapper{
            position: relative;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            .rating-max{
              display: flex;
              fill: #ddd;
            }
            .rating-rating{
              display: flex;
              position: absolute;
              top: 0;
              left: 0;
              overflow: hidden;
              width: 88%;
              svg{
                fill: #ffaa0c;
              }
            }
            svg{
              display: block;
              margin: 0 1px;
              flex: none;
              width: px2rem(10);
              height: px2rem(10);
            }
          }
					.xing{
						color: #ff6000;
						padding: 0 px2rem(5);
						font-size:px2rem(12);
					}
					.shou{
					    color: #000;
						font-size:px2rem(12)
          }
          .feng{
            background-color: #2395ff;
            color: #fff;
            border-radius: px2rem(3);
            font-size: px2rem(11);
          }
				}
				.index_3{
					display: flex;
					justify-content: space-between;
					color: #666;
					width: 100%;
					margin-top: px2rem(8);
					line-height: px2rem(12);
					height: px2rem(12);
					font-size: px2rem(12);
					.fei{
						padding-left: px2rem(5);
					}
					.time{
						font-size: px2rem(12);
						.dist{

						}
						.min{
							color: #2395ff;
						}
					}
        }
        .index-activites{
          margin-top: px2rem(7.5);
          border-top: 1px solid #eee;
          color: #939393;
          .activite-list{
            display: inline-block;
            float: left;
            padding-top: px2rem(5);
            .activity-single{
              margin-top: px2rem(2.5);
              font-size: px2rem(11);
              .activity-icon{
                color: rgb(255, 255, 255);
                border-radius: px2rem(2);
              }
              .activity-description{
                color: #999999;
                font-size: px2rem(11);
              }
            }
          }
          .activite-btn{
            display: inline-block;
            float: right;
            padding: px2rem(10) 0 px2rem(7.5);
            right: 0;
            top: px2rem(0);
            text-align: center;
            font-size: px2rem(11);
            .tubiao{
              width: px2rem(6.5);
              height: px2rem(6.5);
              opacity: .9;
              transition: all .3s ease-in-out;
              transform: rotate(0deg);
              fill: currentColor;
              will-change: transform;
            }
          }
        }
			}
		}
	}
</style>